import {
  Component,
  OnInit,
  Input, OnChanges
} from '@angular/core';

import { v4 as uuidv4 } from 'uuid';
// 数据格式（value的类型是Number）
// const datas = [
//   { type: '黎里镇', value: 200 },
//   { type: '朱家角镇', value: 180 },
//   { type: '金泽镇', value: 160 },
//   { type: '姚庄镇', value: 120 },
//   { type: '西塘镇', value: 88 },
//   { type: '西塘镇sa', value: 88 },
// ];

@Component({
  selector: 'app-scale-chart',
  templateUrl: './scale-chart.component.html',
  styleUrls: ['./scale-chart.component.scss'],
})
export class ScaleChartComponent
  implements OnInit, OnChanges {

  @Input() data = null;
  charts = null;
  id = uuidv4();
  constructor() { }
  ngOnInit() {
  }

  rander(data) {
  }

  configureChart(chart) {
    // if (this.charts) {
    //   this.charts.destory();
    // }
    this.charts = chart;
    this.charts.data(this.data);

    this.charts.axis('value', {
      label: null,
      grid: null,
    });
    this.charts.legend(false);

    this.charts.tooltip(false);
    // 横向
    this.charts.coordinate('rect').transpose();

    this.charts.interaction('active-region');

    this.charts
      .interval()
      .adjust('stack')
      // x轴代表的意思
      .position('value')
      // 柱子颜色
      .color('type', [
        'rgb(34,197,131)',
        'rgb(143,197,34)',
        'rgb(0,175,255)',
        'rgb(166,86,210)',
        'rgb(205,51,0)',
        'rgb(255,144,67)',
      ])
      // 柱子的宽度
      .size(10);
    this.charts.render();
  }

  ngOnChanges() {
    if (this.charts){
      this.charts.changeData(this.data);
      this.charts.render();
    }
  }



}
